.acud-loading-begin {
    fill: #2468f2;
    stroke: #2468f2;
  }
  
  .acud-loading-default {
    background-size: cover;
    width: 48px;
    height: 48px;
  }
  
  
  @keyframes circle6 {
    0% {
      transform: translate3d(35%, 20%, 0)
    }
  
    30% {
      transform: translateZ(0)
    }
  
    70% {
      transform: translateZ(0)
    }
  
    to {
      transform: translate3d(35%, 20%, 0)
    }
  }
  
  .acud-loading-bottom {
    flex-direction: column;
  
  }
  
  .acud-loading-zIndex {
    z-index: 9;
  
  }
  
  .acud-loading-loading-context {
    font-size: 12px;
  
    position: absolute;
  
    top: 0;
  
    left: 0;
  
    right: 0;
  
    bottom: 0;
  
    display: flex;
  
    justify-content: center;
  
    align-items: center;
  
    color: #2468f2;
    background-color: #fff;
    opacity: .9;
  }
  
  [class*="acud-"],
  [class*="acud-"] *,
  [class*="acud-"]::after,
  [class*="acud-"]::before {
    box-sizing: border-box;
  
  }
  
  .acud-loading-begin .circle1 {
    -webkit-animation: circle1 1.8s ease infinite;
    animation: circle1 1.8s ease infinite;
  }
  
  @keyframes circle3 {
    0% {
      transform: translate3d(-35%, -20%, 0)
    }
  
    30% {
      transform: translateZ(0)
    }
  
    70% {
      transform: translateZ(0)
    }
  
    to {
      transform: translate3d(-35%, -20%, 0)
    }
  }
  
  @keyframes circle2 {
    0% {
      transform: translate3d(-35%, 20%, 0)
    }
  
    30% {
      transform: translateZ(0)
    }
  
    70% {
      transform: translateZ(0)
    }
  
    to {
      transform: translate3d(-35%, 20%, 0)
    }
  }
  
  @keyframes circle1 {
    0% {
      transform: translate3d(0, 40%, 0)
    }
  
    30% {
      transform: translateZ(0)
    }
  
    70% {
      transform: translateZ(0)
    }
  
    to {
      transform: translate3d(0, 40%, 0)
    }
  }
  
  .acud-loading-begin .circle2 {
    -webkit-animation: circle2 1.8s ease infinite;
    animation: circle2 1.8s ease infinite;
  }
  
  .acud-loading-begin .circle4 {
    -webkit-animation: circle4 1.8s ease infinite;
    animation: circle4 1.8s ease infinite;
  }
  
  @keyframes circle4 {
    0% {
      transform: translate3d(0, -40%, 0)
    }
  
    30% {
      transform: translateZ(0)
    }
  
    70% {
      transform: translateZ(0)
    }
  
    to {
      transform: translate3d(0, -40%, 0)
    }
  }
  
  .acud-loading-begin .circle3 {
    -webkit-animation: circle3 1.8s ease infinite;
    animation: circle3 1.8s ease infinite;
  }
  
  .acud-loading-begin .circle5 {
    -webkit-animation: circle5 1.8s ease infinite;
    animation: circle5 1.8s ease infinite;
  }
  
  @keyframes circle5 {
    0% {
      transform: translate3d(35%, -20%, 0)
    }
  
    30% {
      transform: translateZ(0)
    }
  
    70% {
      transform: translateZ(0)
    }
  
    to {
      transform: translate3d(35%, -20%, 0)
    }
  }
  
  .acud-loading-begin .circle6 {
    -webkit-animation: circle6 1.8s ease infinite;
    animation: circle6 1.8s ease infinite;
  }
  
  
  
  
  
  
  
  
  
  .acud-loading-begin .frame {
    stroke-dashoffset: 900;
    stroke-dasharray: 900 2440;
    animation: frame 1.8s ease infinite;
  }
  @keyframes frame {
    24.99% {
      stroke-dashoffset: 900
    }
  
    25% {
      stroke-dashoffset: 900
    }
  
    75% {
      stroke-dashoffset: -2440
    }
  
    75.01% {
      stroke-dashoffset: 900
    }
  }
  
  